<template>
	<view>
    <!-- #ifndef MP-TOUTIAO -->
		<u-navbar :title="title"
				  :bgColor="titleBackgroundColor"
				  :leftIconColor="titleColor"
          :border="border"
				  :titleStyle="{'color': titleColor}"
				  :placeholder="placeholder">
			<view class="u-nav-slot u-flex-row u-row-flex-start" slot="left">
				<!-- #ifdef MP-WEIXIN -->
				<!--兼容支付宝navbar透明后仍然有返回首页按钮，在支付宝时就不显示返回按钮-->
				<view class="u-flex-row u-row-flex-start">
					<u-icon
							v-if="pageLength > 1"
							name="arrow-left"
							size="22"
							:color="titleColor"
							@click="leftClick()"
					></u-icon>
					<u-line
							v-if="indexUrlShow && pageLength > 1"
							:color="titleColor"
							direction="column"
							:hairline="true"
							length="16"
							margin="0 10px"
					></u-line>
					<u-icon
							v-if="indexUrlShow"
							name="home"
							size="22"
							:color="titleColor"
							@click="nav()"
					></u-icon>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="u-flex-row u-row-flex-start" v-if="indexUrlShow && pageLength > 1">
					<!--支付宝navbar透明后仍然有返回首页按钮，所以这里不用手动加首页按钮"-->
					<view class="u-m-l-30"></view>
					<u-line
							:color="titleColor"
							direction="column"
							:hairline="true"
							length="16"
							margin="0 10px"
					></u-line>
					<u-icon
							name="home"
							size="22"
							:color="titleColor"
							@click="nav()"
					></u-icon>
				</view>
				<!-- #endif -->
			</view>
		</u-navbar>
    <!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: 'navBar',
		props: {
			// 显示什么标题
			title: {
				type: String,
				default () {
					return '';
				}
			},
			// 是否显示首页快捷入口
			indexUrlShow: {
				type: Boolean,
				default () {
					return false;
				}
			},
			// 标题背景颜色
			titleBackgroundColor: {
				type: String,
				default () {
					return 'transparent'
				}
			},
			// 标题字体颜色
			titleColor: {
				type: String,
				default () {
					return '#000';
				}
			},
			// 固定在顶部时，是否生成一个等高元素，以防止塌陷
			placeholder: {
				type: Boolean,
				default () {
					return false;
				}
			},
      //组件底部默认有一条下边框，如您不需要，可以设置border为false
      border:{
        type: Boolean,
        default() {
          return false;
        }
      }
		},
		data() {
			return {
				uniPlatform: null,
				pageLength: 0,
			};
		},
		created(){
			// 获取当前的平台，如mp-alipay
			this.uniPlatform = uni.getSystemInfoSync().uniPlatform;
			// 获取当前页面栈长度，下标0是首页（第一次进入的页面），最后一个是当前页面
			this.pageLength = uni.$u.pages().length;
			// console.log("this.pageLength:", this.pageLength)
		},
		methods: {
			leftClick() {
				uni.navigateBack()
			},

			nav(){
        uni.switchTab({
          url: '/pages/member/member-center/member-center'
        });
			},
		}
	}
</script>

<style>

</style>
